﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="expires" content="0">
        <title>DotaGrid</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body class="container-fluid">
    
        <!--    FAIR WARNING:
                This code is currently not being maintained anymore. Occasionally new heroes might
                be added, but not much more. Feel free to fork and update the app as per the MIT
                license.
        -->

        <span class="label label-default pull-right" style="margin-top: 10px;">6.83c+ | Techies, Oracle, Winter Wyvern included.</span>
        
        <h1>DotaGrid</h1>
        
        <div class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
            <p><strong>Important!</strong> DotaGrid was meant as an ad-hoc tool. Support not guaranteed, updates may not be frequent or may not come at all. Use at your own risk / pleasure!</p>
            <p><strong>Warning!</strong> DotaGrid probably only works for 1920 x 1080 resolutions, and may screw up your settings on other resolutions.</p>
        </div>
        
        <hr />
        
        <div class="row">
            <div class="col-xs-12 form-inline">
                <div class="form-group">
                    <label for="rows">Rows</label>
                    <input type="number" class="form-control" data-bind="value: rowCount" />
                </div>
                <div class="form-group">
                    <label for="cols">Columns</label>
                    <input type="number" class="form-control" data-bind="value: colCount" />
                </div>
                <div class="form-group">
                    <button class="btn btn-default" data-bind="click: loadResizedGrid">Reset grid with new dimensions</button>
                </div>
                <div class="form-group">
                    ...... Or
                    <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                            Load Template <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#" data-bind="click: loadDefault">Dota 2 Default Layout</a></li>
                            <li><a href="#" data-bind="click: loadAlphabetically">Arranged Alphabetically</a></li>
                            <li><a href="#" data-bind="click: loadColorBased">Arranged by Color</a></li>
                            <li><a href="#" data-bind="click: loadRoleAndAttack">Arranged by Role and Ranged/Melee</a></li>
                            <li><a href="#" data-bind="click: loadMostPlayed">Arranged by Most Played in 6.83c</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <hr />
        
        <p>Click a cell. Then click another to switch them.</p>
        
        <div class="row">
            <div class="col-xs-12">
                <table class="dotaGrid">
                    <tbody data-bind="foreach: rows">
                        <tr data-bind="foreach: cells">
                            <td data-bind="style: { width: $root.cellWidthPx, height: $root.cellHeightPx },
                                           css: { active: $root.activeCell() === $data, dimmed: $root.isDimmed($data) },
                                           click: $root.activateCell">
                                <!-- ko with: hero -->
                                <img data-bind="attr: {title: tooltip, src: imageSrc},
                                                style: { width: $root.cellWidthPx, height: $root.cellHeightPx }" />
                                <!-- /ko -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 form-inline">
                <div class="form-group">
                    <label for="freeTextFilter">Highlight by name:</label>
                    <input id="freeTextFilter" type="text" class="form-control input-sm" placeholder='"snip", "pu", etc' data-bind="value: freeTextFilter, valueUpdate: 'afterkeydown'" />
                </div>
            </div>
        </div>
        
        <hr />

        <div class="row">
            <div class="col-sm-4">
                <h4><span class="glyphicon glyphicon-floppy-disk"></span> Dota Layout File Format</h4>
                <p>Copy-paste to e.g. <code>/dota/cfg/layouts/yourfilename.txt</code>. File has to be in <strong>ANSI encoding</strong> (often the default).</p>
                <textarea class="form-control gridfile" data-bind="value: gridfile" spellcheck="false"></textarea>
            </div>
            <div class="col-sm-4">
                <h4><span class="glyphicon glyphicon-export"></span> Save DotaGrid</h4>
                <p>Save the code below to load it later on. In this alpha version you'll have to use the clipboard and your favorite text editor.</p>
                <div class="form-group">
                    <textarea class="form-control savefile" data-bind="value: fileToSave"></textarea>
                </div>
            </div>
            <div class="col-sm-4">
                <h4><span class="glyphicon glyphicon-import"></span> Load DotaGrid</h4>
                <p>Load a saved grid. Paste a saved DotaGrid (text you saved from the box next to this one) into this area below and hit "Load Grid":</p>
                <div class="form-group">
                    <textarea class="form-control loadfile" data-bind="value: fileToLoad"></textarea>
                </div>
                <p><button class="btn btn-default" data-bind="click: loadDgFile">Load Grid</button></p>
            </div>
        </div>
        
        <hr />
        
        <footer><small>
            Tool and <a href="https://code.google.com/p/dotagrid/">code</a> licensed under <a href="http://opensource.org/licenses/mit-license.php">The MIT License</a>. Dota2 (all related trademarks and material) is owned by <a href="http://www.dota2.com">Valve</a>. For questions contact me at <abbr title="A simple attempt at fooling e-mail-address-spiders. Change it to a true mail address yourself ;).">dotagrid (at) jeroenheijmans (dot) nl</abbr> (though the tool is provided "AS IS", I give no guarantees about anything; <a href="https://code.google.com/p/dotagrid/">the code's open source</a> though if you want to change it yourself).
        </small></footer>
        
        <br />
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/knockout-3.1.0.js"></script>
        <script src="js/tempHeroesJson.js"></script>
        <script src="js/myMonolithicApp.js"></script>
    </body>
</html>